<template>
  <div class="symbol">
    <div class="line_6">
      <div class="l_l" v-show="getSymbol[0] == 0"></div>
      <div class="l_r" v-show="getSymbol[0] == 0"></div>
      <div class="l_a" v-show="getSymbol[0] == 1"></div>
    </div>
    <div class="line_5">
      <div class="l_l" v-show="getSymbol[1] == 0"></div>
      <div class="l_r" v-show="getSymbol[1] == 0"></div>
      <div class="l_a" v-show="getSymbol[1] == 1"></div>
    </div>
    <div class="line_4">
      <div class="l_l" v-show="getSymbol[2] == 0"></div>
      <div class="l_r" v-show="getSymbol[2] == 0"></div>
      <div class="l_a" v-show="getSymbol[2] == 1"></div>
    </div>
    <div class="line_3">
      <div class="l_l" v-show="getSymbol[3] == 0"></div>
      <div class="l_r" v-show="getSymbol[3] == 0"></div>
      <div class="l_a" v-show="getSymbol[3] == 1"></div>
    </div>
    <div class="line_2">
      <div class="l_l" v-show="getSymbol[4] == 0"></div>
      <div class="l_r" v-show="getSymbol[4] == 0"></div>
      <div class="l_a" v-show="getSymbol[4] == 1"></div>
    </div>
    <div class="line_1">
      <div class="l_l" v-show="getSymbol[5] == 0"></div>
      <div class="l_r" v-show="getSymbol[5] == 0"></div>
      <div class="l_a" v-show="getSymbol[5] == 1"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SmallSymbolComponent',
  props: {
    symbol: String
  },
  data () {
    return {
      line_6: 0,
      line_5: 0,
      line_4: 0,
      line_3: 0,
      line_2: 0,
      line_1: 0
    }
  },
  computed: {
    getSymbol () {
      if (this.symbol && this.symbol.split(',').length > 0) {
        return this.symbol.split(',')
      } else {
        return '0,0,0,0,0,0'.split(',')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.symbol {
  display: inline-block;
  width: 36px;
  padding: 0;
  margin: 0;
  // border: 1px solid red;
  .line_6,
  .line_5,
  .line_4,
  .line_3,
  .line_2,
  .line_1 {
    height: 5px;
    padding: 0;
  }
  .l_a {
    border-top: 4px solid #000;
    width: 34px;
    float: left;
  }
  .l_l {
    float: left;
    border-top: 4px solid #000;
    width: 16px;
    margin-right: 1px;
  }
  .l_r {
    float: left;
    border-top: 4px solid #000;
    width: 16px;
    margin-left: 1px;
  }
}
</style>